extends layout
append scripts
    script.
        $(function(){
            myFunction = function(){ console.log("hello"); }  // onsubmit 后面关联的函数不能是 onsubmit(), 因为 onsubmit 函数已经被占用了
            $('form').submit(function(e){  // 也可以用 $('form.test') 来绑定元素
                e.preventDefault();  // 点击 submit 后, 默认会刷新当前页面, 这句话阻止刷新
                var form = $(this);  // 这里只是方便一点, 也可以使用 $('form').serialize() 来代替 form.serialize()
                console.log(form.serialize());  // 序列化表单值, form 中的 input 元素必须使用 name 属性
                // firstname=Ruipeng&lastname=Jia&pwd=123&md5-pwd=123&sex=male&vehicle=Bike&date=2015-07-01&
                // datetime=2015-07-01T02%3A03%3A04&color=%23ff0000&cars=fiat
                $.ajax({  // 调用 Ajax
                    type: 'post',
                    url: '#',
                    data: $('form.test').serialize(),  // 和 $('form') 相同
                    success: function () { console.log("Data has been sent!"); }
              });
            })
        })
block content
    //- HTML 表单的输入控件主要有以下几种: 标签是输入标签 input, 输入类型是由类型属性 (type) 定义的
    //- input 标签重要的属性: type name value
    //- form 点击 submit 顺序: 先执行 onsubmit -> 然后执行 $('form').submit; onsubmit 属性完全可以不使用
    .container
        form.test(onsubmit="myFunction()")
            //- placeholder 是初始提示值, 不会被提交; value 会被提交上去; checked 默认选中单选框, 复选框
            | First name: #[input(type="text" name="firstname" value="Ruipeng")] #[br]
            | Last name:  #[input(type="text" name="lastname" value="Jia")]      #[br]
            | Password:   #[input(type="password" name="pwd" value='123')]       #[br]
            | Md5:        #[input(type="text" name="md5-pwd" value='123')]       #[br]
            //- 单选, 因为 input 是 单标签元素, 所以后面不能跟 #[], 所以把 文本写到前面
            | Male   #[input(type="radio" name="sex" value="male" checked="checked")]   #[br]
            | Female #[input(type="radio" name="sex" value="female")] #[br]
            //- 复选
            | I have a bike #[input(type="checkbox" name="vehicle" value="Bike" checked="checked")] #[br]
            | I have a car #[input(type="checkbox" name="vehicle" value="Car")] #[br]
            //- HTML5 新增
            p #[input(type="date" name="date" value="2015-07-01")]
            p #[input(type="datetime-local" name="datetime" value="2015-07-01T02:03:04")]
            p #[input(type="color" name="color" value="#ff0000")]
            //- 预选下拉列表, 默认选中 fiat
            select(name="cars")
                option(value="volvo") Volvo
                option(value="saab") Saab
                option(value="fiat" selected="") Fiat
                option(value="audi") Audi
            //- 会根据 name 属性进行提交; 和 button 效果相同
            input(type="submit" value="Submit")
            button(type='submit') Submit
